<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<style>
    .container{
        width: 400px;
        margin: 0 auto;
    }
    h1{
        text-align: center;
    }
    p {
        text-align: center;
        color: #666;
    }
    .row {
        height: 40px;
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
    .row span{
        width: 100px;
    }
    .row input{
        width: 200px;
        height: 30px;
    }
    .row button{
        width: 310px;
        height: 40px;
        color: #666;
        background-color: rgb(142, 210, 142);
        border: none;
    }
    .row button:active{
        background-color: burlywood;
    }
</style>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入后点击提交，就会把信息显示在表格中</p>
        <div class="row">
            <span>谁：</span><input type="text">
        </div>
        <div class="row">
            <span>对谁：</span><input type="text">
        </div>
        <div class="row">
            <span>说：</span><input type="text">
        </div>
        <div class="row">
            <button>提交</button>
        </div>
        
        <!-- 需要构造出一个 形如 -->
        <!-- <div class="row">
            黑猫 对 白猫 说：喵
        </div> -->
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script>
        //获取要用到的元素
        let button = document.querySelector('button');
        let container = document.querySelector('.container');
        button.onclick = function() {
            //1.获取到输入框中的内容
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if(from == '' || to == '' || message == '') {
                alert('当前输入框内容为空');
                return;
            }
            console.log(from+", "+ to + ", "+message);
            //2.构造出一个新的div，用来保存用户提交的内容.
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + ' 对 ' + to + ' 说：' + message;
            container.appendChild(rowDiv);
            //3.提交完之后清空输入框中的内容
            for (let index = 0; index < inputs.length; index++) {
                inputs[index].value = '';
            }
            let data = {
                from: from,
                to: to,
                message: message
            }
            // 4.点击发送按钮给服务器发个 post 请求
            $.ajax({
                type: 'post',
                url: 'message',
                // 这里放的是body 的内容
                data: JSON.stringify(data),
                contentType:"application/json; charset=utf8",
                success: function(body) {
                    console.log("提交数据成功");
                }
            });

        }

        // 直接写在 script 标签里的代码
        // 来获取服务器
        function getMessages() {
            $.ajax({
                type: 'get',
                url: 'message',
                success: function(body) {
                    // 此处 body 就是响应的 body内容， json数组
                    // jquery 把 json 数组解析成了 js 对象数组
                    // 前提条件：响应的 Content-Type 得是 application/json
                    let container = document.querySelector('.container');
                    for(let i = 0; i < body.length; i++) {
                        let message = body[i];
                        // 根据这个元素 构造一个 div.row, 来存放数据
                        //<div class="row">
                        //    黑猫 对 白猫 说：喵
                        //</div> 
                        let row = document.createElement('div');
                        row.className = 'row';
                        row.innerHTML = message.from+" 对 "+message.to+" 说："+message.message;
                        container.appendChild(row);
                    }
                }
            });
        }

        getMessages();
        
    </script>
</body>
</html>